import './Map.css';
import React from 'react';
import {LoadImage, PointLayer, AMapScene, LayerEvent} from '@antv/l7-react';
import a1 from './img/airport1.svg';
import {Drawer} from 'antd';
import airport1 from './img/airport1.svg';
import airport2 from './img/airport2.svg';
import airport3 from './img/airport3.svg';
import airport4 from './img/airport4.svg';
import airport5 from './img/airport5.svg';


class E3 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            currentData: {},
            drawerVisible: false,
        }

    }

    componentWillMount() {
        console.log("componentWillMount");
    }

    componentDidMount() {
        console.log("componentDidMount");
        let res = [];
        fetch('http://flightapi.xiexianbo.xin/airPort/listAll')
            .then(response => response.json())
            .then((data) => {
                console.log(data);
                this.setState({
                    data: data.data.data,
                })
            });
    }

    handleClick = (e) => {
        console.log(e.feature);
        this.setState({
            currentData: e.feature,
            drawerVisible: true,
        })
    }
    handleDrawerClose = () => {
        this.setState({
            drawerVisible: false,
        })
    }

    render() {
        const {
            data = [{
                IATACode: "SHA",
                aptCcity: "上海",
                aptCname: "上海虹桥",
                flightNumber: 1620,
                latitude: 31.194,
                longitude: 121.32,
            }], drawerVisible = false, currentData = {},
        } = this.state;
        console.log(data);
        return (
            <div className="Main">
                <AMapScene
                    map={{
                        center: [110.19382669582967, 50.258134],
                        pitch: 0,
                        style: 'light',
                        zoom: 2,
                    }}
                    style={{
                        position: 'absolute',
                        top: 0,
                        left: 0,
                        right: 0,
                        bottom: 0,
                    }}
                >
                    <LoadImage name="00" url={airport1} />
                    <LoadImage name="01" url={airport2} />
                    <LoadImage name="02" url={airport3} />
                    <LoadImage name="03" url={airport4} />
                    <LoadImage name="04" url={airport5} />

                    {data && (
                        <PointLayer
                            key={'2'}
                            options={{
                                autoFit: true,
                            }}
                            source={{
                                data,
                                parser: {
                                    type: 'json',
                                    x: 'longitude',
                                    y: 'latitude',
                                },
                            }}

                            shape={{
                                field: 'flightNumber',
                                values: (flightNumber) => {
                                    let myShape = '';
                                    if (flightNumber <= 100 && flightNumber >= 0) {
                                        myShape = "00";
                                    } else if (flightNumber > 100 && flightNumber <= 500) {
                                        myShape = '01';
                                    } else if (flightNumber > 500 && flightNumber <= 1000) {
                                        myShape = '02';
                                    } else if (flightNumber > 1000) {
                                        myShape = '03';
                                    } else {
                                        myShape = '04';
                                    }
                                    return myShape;
                                },
                            }}
                            size={{
                                values: 10,
                            }}
                            style={{
                                opacity: 1,
                            }}
                        >
                            <LayerEvent type="click" handler={this.handleClick}/>
                        </PointLayer>
                    )}
                </AMapScene>
                <Drawer title="Flight Port" placement="right" onClose={this.handleDrawerClose}
                        visible={drawerVisible}>
                    <p>aptCname:{currentData.aptCname || ""}</p>
                    <p>aptCcity:{currentData.aptCcity}</p>
                    <p>aptCname:{currentData.flightNumber || ""}</p>
                    <p>aptCname:{currentData.latitude || ""}</p>
                    <p>aptCname:{currentData.longitude || ""}</p>

                </Drawer>
            </div>
        )
    }
}

export default E3;